<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>H5+JS+CSS3 实现圣诞情缘-慕课网</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
  <meta name="description" content="本课程中使用面向对象的编程方式，采用H5+JS+CSS3的混合使用实现整个功能。课程当中总共分为3个主题场景图，多个精灵图以及雪碧图，实现了静与动的完美结合，并且由浅入深的将整个案例拆分讲解 http://www.imooc.com/learn/545" />
  <link rel="stylesheet" href="style.css" type="text/css" />
  <link rel="stylesheet" href="icon-moon.css" type="text/css" />
</head>
<body >
<div id="main">
  <div class="course-infos">
    <div class="course-info-main clearfix w">
      <div class="content-wrap">

          <div class="aside r"> 
             <div class="bd"> 
                <div class="box download"> 
                 <h4>资料下载</h4> 
                 <ul class="downlist"> 
                  <li> <a href="http://img.mukewang.com/down/567118a70001573300000000.rar" target="_blank" download="" data-id="" title="音乐素材" class="download-item"> <span><i class="icon icon-folder"></i>音乐素材</span> <span class="downcode">下载</span> </a> </li> 
                  <li> <a href="http://img.mukewang.com/down/56721114000136ab00000000.rar" target="_blank" download="" data-id="" title="图片素材" class="download-item"> <span><i class="icon icon-folder"></i>图片素材</span> <span class="downcode">下载</span> </a> </li> 
                 </ul> 
                </div> 
                <div class="box mb40 js-usercard-box"> 
                 <h4>讲师提示</h4> 
                 <div class="teacher-info"> 
                  <a href="/u/290139/courses?sort=publish" target="_blank"> <img data-userid="290139" class="js-usercard-dialog" src="http://img.mukewang.com/54bf47ea000132d002200220-80-80.jpg" width="80" height="80" /> </a> 
                  <span class="tit"> <a href="/u/290139/courses?sort=publish" target="_blank">Aaron艾伦</a><i class="icon-imooc"></i> </span> 
                  <span class="job">Web前端工程师</span> 
                 </div> 
                 <div class="course-info-tip"> 
                  <dl class="first"> 
                   <dt>
                    课程须知
                   </dt> 
                   <dd class="autowrap">本课程为高级案例课程，其中所用的大部分知识点不做深入剖析，只讲解如何使用，部分代码需要由你自己填充。 需要具备如下知识： 
                    1、HTML4、HTML5
                    2、CSS2、CSS3 
                    3、JavaScript、jQuery 
                    4、面向对象思想
                    5、SVG基础知识
                    6、Canvas基础知识
                   </dd> 
                  </dl> 
                  <dl> 
                   <dt>
                    老师告诉你能学到什么？
                   </dt> 
                   <dd class="autowrap">1、rem式布局 
                    2、转场特效
                    3、异步编程处理 
                    4、CSS3动画过渡 
                    5、JS动画实现 
                    6、H5的音乐效果
                    7、H5的视频效果
                    8、SVG画图
                    9、canvas画图
                   </dd> 
                  </dl> 
                 </div> 
                </div> 
                <div class="js-recom-box"></div> 
             </div> 
             <div class="js-recom-box">
               <div class="box mb40"> 
                <h4>推荐课程</h4> 
                <ul class="js-courserecom other-list"> 
                 <li> <a href="//coding.imooc.com/class/50.html" target="_blank"> <span class="name autowrap">所向披靡的响应式开发</span> </a> </li>
                 <li> <a href="//coding.imooc.com/class/15.html" target="_blank"> <span class="name autowrap">组件方式开发 Web App全站 </span> </a> </li>
                 <li> <a href="/learn/121" target="_blank"> <span class="name autowrap">CSS深入理解之float浮动</span> </a> </li>
                 <li> <a href="/learn/227" target="_blank"> <span class="name autowrap">CSS3绚丽照片墙</span> </a> </li>
                 <li> <a href="/learn/494" target="_blank"> <span class="name autowrap">Hello，移动WEB</span> </a> </li> 
                </ul> 
               </div>
              </div> 
          </div>  
          <div class="clear"></div>  
